<template>
    <div class="lorem" ref="lorem">
        <div>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque commodi, quam ullam fugit natus ipsa
            accusantium. Cupiditate dicta repudiandae nobis doloremque inventore temporibus facere mollitia, saepe culpa
            enim modi quisquam! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque commodi, quam ullam
            fugit natus ipsa accusantium. Cupiditate dicta repudiandae nobis doloremque inventore temporibus facere
            mollitia, saepe culpa enim modi quisquam!
        </div>
    </div>
    <dd-scrollbar :bind="lorem" />
    <br />
    <dd-scrollbar direction="column" bind-direction="column" :bind="lorem" long="10em"/>
</template>

<script setup lang="ts">
import { ref } from "vue";

const lorem = ref<HTMLDivElement>();
</script>

<style>
.lorem {
    width: 10em;
    height: 10em;
    overflow: hidden;
    margin-bottom: 1em;
}
.lorem div {
    width: 20em;
}
</style>
